import dayjs from 'dayjs';
import { CustomRangePicker } from 'eaid';
interface Props {
  handleDateChange: (data: any) => void;
  handleQuickSelect: (range: number, activeRange: string) => void;
  dateRange: [dayjs.Dayjs, dayjs.Dayjs];
  activeRange: string;
}

const DataOverviewHeader = ({
  handleDateChange,
  handleQuickSelect,
  dateRange,
  activeRange,
}: Props) => {
  return (
    <div className=" flex  items-center justify-end rounded-default ">
      <div className="flex items-center justify-center">
        <div className="mr-3 flex h-8 w-[188px] cursor-pointer items-center justify-center rounded-md border border-line-2 bg-white p-1">
          <div
            className={`w-1/2   text-center ${
              activeRange === '7days' ? 'rounded bg-fill-1 text-[#1E6FF8] ' : ''
            }`}
            onClick={() => handleQuickSelect(7, '7days')}
          >
            近七天
          </div>
          <div
            className={` w-1/2   text-center ${
              activeRange === '30days' ? 'rounded bg-fill-1 text-[#1E6FF8] ' : ''
            }`}
            onClick={() => handleQuickSelect(30, '30days')}
          >
            近一月
          </div>
        </div>
        <CustomRangePicker
          className="h-8 !border-line-2"
          value={dateRange}
          onChange={handleDateChange}
        />
      </div>
    </div>
  );
};
export default DataOverviewHeader;
